<template>
    <div class="receiptDetailwrap">
        <!-- <div class="titAddress">
            <p>起点: <span>上海市 浦东新区</span></p>
            <p>终点: <span>乌鲁木齐市 昌吉回族自治区</span></p>
        </div> -->
        <div class="waybillInfo">
            <div class="titleH3">
                <i></i>
                <h3>运单信息</h3>
            </div>
            <ul>
                <li><b>运单号</b>：<span>{{waybillInfo.transBillId}}</span></li>
                <li><b>运单日期</b>：<span>{{waybillInfo.transBillDate}}</span></li>
                <li><b>运单状态</b>：<span>{{waybillInfo.transBillStatusName}}</span></li>
                <li><b>运输方式</b>：<span>{{waybillInfo.transTypeName}}</span></li>
                <li><b>报价方式</b>：<span>{{waybillInfo.quoteType | quoteTypeName}}</span></li>
                <li><b>运输总量</b>：<i>{{(waybillInfo.transWeight*1).toFixed(3)}}</i><span>吨</span></li>
                <li><b>期望价格</b>：<i>{{(waybillInfo.transAmount*1).toFixed(3)}}</i><span>元/吨（含税）</span></li>
                <li><b>运费包含</b>：<span>{{waybillInfo.feeName}}</span></li>
                <li><b>预计杂费</b>：<i>{{(waybillInfo.otherAmount*1).toFixed(2)}}</i><span>元（税率：{{waybillInfo.feeTaxRate*100}}%）</span></li>
                <li><b>运输要求</b>：<span>{{waybillInfo.transRequest}}</span></li>
            </ul>
        </div>
        <div class="lineInfo">
            <div class="lineSing" v-for='(item,index) in transportD' :key="index">
                <div class="titleH3">
                    <i></i>
                    <h3>线路{{index+1}}（{{item.beginSiteProvince | city}}<span class="cent">至</span>{{item.endSiteProvince | city}}）</h3>
                </div>
                <ul>
                    <li><i>入库抬头</i>：{{item.putinTitle}}</li>
                    <li><i>提货点</i>：<span style="line-height:24px;">{{item.beginSiteStorage}}（{{item.beginSiteAddr}}）</span></li>
                    <li><i>联系人</i>：<span>{{item.beginSiteContract}}  {{item.beginSitePhone}}</span></li>
                    <li><i>提货时间</i>：<span>{{item.pickupTime}}</span></li>
                    <li><i>联系人</i>：<span>{{item.endSiteContract}}   {{item.endSitePhone}}</span></li>
                    <li><i>卸货点</i>：<span style="line-height:24px;">{{item.endSiteStorage}}（{{item.endSiteAddr}}）</span></li>
                    <li><i>卸货时间</i>：<span>{{item.deliveryTime}}</span></li>
                    <li><i>货物信息</i>：<span class="goodsSpan">{{item.productTypeNameByApp}} {{((item.totalGoodsWeightByApp || 0)*1).toFixed(3)}}吨 {{item.totalGoodsCountByApp}}件</span><a class="fr" href="javascript:;" @click='showGoods(item.goods)'>查看详情</a></li>
                    <li class="clearfix">
                        <div class="fl ">
                            <i class="disIcon"></i>
                            <span class="dispathInfoTit">调度信息</span>
                        </div>
                        <div class="fr">
                        	<a href="javascript:;" class="uploadBtn" @click="receiptUpload">回单上传</a>
                        </div>
                    </li>
                </ul>

                <ul class="dispatchInfoList">
                    <li v-for='(d,i) in item.tspDispatch' :key="i"  @click = 'toChecked(d)'>
                    	<span>
                    		<div class="magWrap">
								<input class="magic-radio" type="radio" name="radio" :id="d.dispatchId" :value="d.dispatchId" v-bind:checked="checkedValue == d.dispatchId">
								<label :for="d.dispatchId"></label>
							</div>
                    	</span>
                        <span>{{d.vehicleNum}}</span>
                        <span>{{d.driverUserName}}</span>
                        <span>{{d.driverPhone}}</span>
                        <span>{{(d.dispatchWeight*1).toFixed(3)}}吨</span>
                        <span class="view"><a href="javascript:;" @click='queryReceiptInfo(d.dispatchId)'>查看</a></span>
                    </li>
                </ul>

                <mt-popup v-model="popupVisible" popup-transition="popup-fade">
                    <mt-PopupTable :transportGoodsVo="item.transportGoodsVo"></mt-PopupTable>
                </mt-popup>
                <mt-popup v-model="receiptInfo" popup-transition="popup-fade" class='receiptInfoPopup'>
                    <div class="receiptInfoWrap">
                        <div class="head">
                            <h3>回单信息</h3>
                            <span @click='receiptInfo = false'>×</span>
                        </div>
                        <ul class="info">
                            <li>
                                <span>回单吨位：</span>
                                <i>{{(actDispatchWeight*1).toFixed(3)}}吨</i>
                            </li>
                            <li>
                                <span>回单件数：</span>
                                <i>{{actDispatchCount}}件</i>
                            </li>
                            <li>
                                <span>实际杂费：</span>
                                <i>{{(otherFee*1).toFixed(2)}}元</i>
                            </li>
                        </ul>
                        <div class="imgShow">
                            <h3>装卸货图片</h3>
                            <ul class="imgGroup clearfix">
                                <li  v-for="(item, index) in stevedores" :key="index">
                                    <img class="wc-preview-img"  :src="item.attachmentUrl" @click="appShowImg($event, imgStevedores,index)">
                                </li>
                            </ul>
                             <h3>签收单图片</h3>
                            <ul class="imgGroup clearfix">
                                <li  v-for="(item, index) in attachment">
                                    <img class="wc-preview-img"  :src="item.attachmentUrl" alt="" @click="appShowImg($event, imgAttachment,index)">
                                </li>

                            </ul>
                             <h3>杂费发票图片</h3>
                            <ul class="imgGroup clearfix">
                                <li v-for="(item, index) in attachmentInvoice">
                                    <img class="wc-preview-img"  :src="item.attachmentUrl" alt="" @click="appShowImg($event, imgInvoice,index)">
                                </li>

                            </ul>
                        </div>
                    </div>
                </mt-popup>
            </div>
            <a href="javascript:;" class="footBtn" @click='confirm'>提交审核</a>
        </div>
        <!-- 底部打开日期 -->
        <mt-datetime-picker
        ref="startPicker"
        type="datetime"
        v-model="startPickerValue"
        @confirm="start">
      </mt-datetime-picker>
      <mt-datetime-picker
        ref="endPicker"
        type="datetime"
        v-model="endPickerValue"
        @confirm="end">
      </mt-datetime-picker>
    </div>
</template>
<script type="text/ecmascript-6">
import ApiService from '@/services/API-servies'
import { Tabbar, TabItem ,Cell,TabContainer,TabContainerItem,Button,Popup,DatetimePicker,MessageBox} from 'mint-ui';
import MTabbar from '../foot/Tabbarfoot'
import PopupTable from '../public/popupTable'
  export default {
    created() {
        this.getDetail();
    },
    data() {
      return {
        waybillInfo : {
            transBillId:'',
            transBillDate:'',
            transBillStatus:'',
            transBillStatusName:'',
            transTypeName:'',
            transWeight:'',
            otherAmount:'',
            transRequest:'',
            feeName:'',
            transAmount:'',
            quoteType:'',
            feeTaxRate:0.11
        },
        offerForm: {
            transBillId:'',
            quotationPrice:'',
            pickupTime:'',
            deliveryTime:'',
        },
        transportD:[],
        transportGoodsVo:[],
        popupVisible:false,
        popupVisible2:false,
        receiptInfo:false,
        startPickerValue:new Date(),
        endPickerValue:new Date(),
        transBillStatus:'',
        disabled:true,
        selected: 'a',
        checkedValue:'',
        actDispatchWeight:'0.00',
        actDispatchCount:'0',
        otherFee:'',
        attachment:[],
        attachmentInvoice:[],
        stevedores:[],
        imgStevedores:[],
        imgInvoice:[],
        imgAttachment:[],
        checkedIndex:''
      }
    },
    mounted(){
        setTimeout(() => {
            if(this.$isBrower.isAndroid){
            }else if(this.$isBrower.isIos){
                this.setIosTitleType();
            }
        }, 0)
    },
    methods: {
        toOffer(){
            this.popupVisible2 = true
        },
        getDetail(){
            let transBillId = this.$route.query.transBillId;
            this.offerForm.transBillId = transBillId;
            ApiService.receipt.detail({
                transportId:transBillId
            }).then((res) =>{
                if(res.meta.retCode === '0'){
                    this.assign(res.data);
                }

            });
        },
        assign(data){
            for(let item in this.waybillInfo){
                this.waybillInfo[item] = data[item];
            };
            this.transportD = data.transportD;
            this.transBillStatus = data.transBillStatus
        },
        showGoods(transportGoodsVo){
            this.popupVisible=true;
            this.transportGoodsVo=transportGoodsVo
        },
        start(value){
            let start = this.$moment(value).format("YYYY-MM-DD HH:mm");
            this.offerForm.pickupTime = start;
        },
        end(value){
            let end = this.$moment(value).format("YYYY-MM-DD HH:mm");
            this.offerForm.deliveryTime = end;
        },
        receiptUpload(){
            if('' == this.checkedValue){
                MessageBox('提示', '请选择调度信息');
                return ;
            }
            this.$router.push({path:'receiptUpload', query: {dispatchId:this.checkedValue , transBillId:this.$route.query.transBillId}})
        },
        queryReceiptInfo(dispatchId){
            ApiService.receipt.tspDispatchDetail({
                    dispatchId:dispatchId
            }).then((res) =>{
                if(res.meta.retCode != '0'){
                    return ;
                }
                var _dispach = res.data;
                this.actDispatchWeight = _dispach.actDispatchWeight;
                this.actDispatchCount = _dispach.actDispatchCount;
                this.otherFee = _dispach.otherFee;
                this.attachment = _dispach.attachment;
                this.attachmentInvoice = _dispach.attachmentInvoice;
                this.stevedores = _dispach.stevedores;

                this.imgStevedores = [];
                this.imgInvoice = [];
                this.imgAttachment = [];
                for (var i = this.stevedores.length - 1; i >= 0; i--) {
                    this.imgStevedores.push(this.stevedores[i].attachmentUrl);
                }
                for (var i = this.attachmentInvoice.length - 1; i >= 0; i--) {
                    this.imgInvoice.push(this.attachmentInvoice[i].attachmentUrl);
                }
                for (var i = this.attachment.length - 1; i >= 0; i--) {
                    this.imgAttachment.push(this.attachment[i].attachmentUrl);
                }
            })
            this.receiptInfo = true;
        },
        confirm(){
            let transportId = this.$route.query.transBillId;
            ApiService.receipt.confirm({
                transportId:transportId
            }).then((res) =>{
                if(res.meta.retCode === '0'){
                    this.$router.push({name:"",path:'/transport'})
                }

            });
        },
        appShowImg($event,list,index){
            let params = {
                currentIndex:index,
                pickerList:list
              };
            if(this.$isBrower.isIos){
              this.$bridge.callhandler('LookBigPictureAction', params, (data) => {})
            }
            if(this.$isBrower.isAndroid){
              app.showImg(params);
            }
       }
        ,
         //ios 设置头部信息
          setIosTitleType(){
            let params = {
              isReturn: true,
              isSearch: false,
              isTitleSegment:false
            };
            this.$bridge.callhandler('needBarButton', params, (data) => {})
          },
          toChecked(d) {
            this.checkedValue = d.dispatchId;
            }
    },
    watch: {
    },
    filters: {
        city(val){
            var index=val.indexOf('-') + 1;
            return val.substring(index)
        },
        transBillStatus(val){
            if(val == 30){
                return '待竞价'
            }else if(val == 50){
                return '待选择'
            }else if(val == 60){
                return '参与竞价'
            }else if(val == 65){
                return '待调度'
            }else if(val == 60){
                return '已派运'
            }else if(val == 68){
                return '已送达'
            }else if(val == 71){
                return '返单待客户确认'
            }else if(val == 80){
                return '运输完成'
            }else if(val == 95){
                return '结算完成'
            }
        },
        quoteTypeName(val) {
        if (val == 10) {
          return '总价'
        } else if (val == 20) {
          return '单价'
        }
      },
    },
    components: {
      MtTabbar : Tabbar,
      MtTabItem : TabItem,
      mtCell : Cell,
      MtTabContainer : TabContainer,
      MtTabContainerItem : TabContainerItem,
      MTabbar,
      MtButton:Button,
      MtPopup:Popup,
      MtPopupTable:PopupTable,
      MtDatetimePicker:DatetimePicker
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
  @import "~common/less/variable";
  @import "~common/less/modules/waybillDetail.less";
  @import "~common/less/modules/public.less";
  .wc-mask{
      z-index: 9999 !important;
  }
  .receiptDetailwrap{
        i,span,li{
            font-weight: 400;
        }
        i, b{
          text-align: justify;
          text-align-last: justify;
          line-height: 0;
        }
        .cent{
            margin: 0 20px
        }
        .dispathInfoTit{
            font-size: 28px;
            display: inline-block;
            line-height: 58px;
        }
        .dispathBtn{
            background: @blue;
            color: #fff;
            border-radius: 8px;
            font-size: 26px;
            padding: 12px 18px;
            font-weight: 400;
        }
        .lineInfo{
          padding-bottom: 40px;
            .footBtn{
                display: block;
                width: 670px;
                height: 90px;
                background: @blue;
                color: #fff;
                font-weight: 400;
                font-size: 36px;
                line-height: 90px;
                text-align: center;
                border-radius: 8px;
                margin: 40px auto;
                margin-bottom: 0;
            }
            .lineSing{
                .uploadBtn{
                    background: @blue;
                    color: #fff;
                    padding: 16px;
                    border-radius: 8px;
                }
                .receiptInfoPopup{
                    transform:none;
                    position:fixed;
                    top:50%;
                    left:50%;
                    margin-left:-330px;
                    margin-top: -50%;
                    max-height: 900px;
                }
                .dispatchInfoList{
                    li{
                        padding: 20px -20px;
                        margin: 0 -10px;
                        border-bottom: none;
                        font-size: 26px;
                        span{
                            display: inline-block;
                            padding-left:4px;
                            &:nth-child(1){
                                width: 28px;
                            }
                            &:nth-child(2){
                                width: 130px;
                            }
                            &:nth-child(3){
                                width: 94px;
                            }
                            &:nth-child(4){
                                width: 180px;
                            }
                            &:nth-child(5){
                                width: 150px;
                            }
                            &.close{
                                width: 36px;
                                height: 36px;
                                background: url(../../common/imgs/close.png) no-repeat 10px 0;
                                vertical-align: middle;
                            }
                            &.view{
                                display:inline;
                            }
                        }
                        &:nth-child(odd){
                            background: #f4f7fd
                        }
                    }
                }
                .receiptInfoWrap{
                    width: 660px;
                    position:relative;
                    overflow: auto;
                    .head{
                        background: #F9F9F9;
                        position: fixed;
                        width:100%;
                        z-index:999;
                        h3{
                            text-align: center;
                            font-size: 36px;
                            padding: 12px 0;
                        }
                        span{
                            position: absolute;
                            top: 10px;
                            right: 0;
                            width: 56px;
                            height: 56px;
                            line-height: 48px;
                            font-size: 56px;
                        }
                    }
                    ul.info{
                        padding: 0 60px;
                        margin-top: 100px;
                        li{
                            border: none;
                            padding: 0;
                            span{
                                width:auto
                            }
                        }
                    }
                    .imgShow{
                        h3{
                            color: #666;
                            font-size: 30px;
                            padding: 0 30px;
                            background: #F1F1F3;
                        }
                        .imgGroup{
                            padding: 20px;
                            li{
                                float: left;
                                width: 132px;
                                height: 130px;
                                margin-left: 20px;
                                margin-bottom: 20px;
                                position: relative;
                                border: 0.013333rem solid #D0D0D0;
                                padding: 0;
                                // background: #999;
                                img{
                                    width: 100%;
                                    height: 100%;
                                    position: absolute;
                                    // top: 50%;
                                    // transform: translateY(-50%);
                                }
                            }
                        }
                    }
                }
                .mint-popup{
                    overflow: auto;
                }
            }
        }
    }
  .quote{
    width: 756px;
    padding: 30px;
    .row{
        padding:10px 30px;
        input{
            padding: 10px;
            width: 680px;
            border: 2px solid #ccc;
            border-radius: 6px;
            font-size: 15px;
            &.priceIpt{
                width: 500px
            }
        }
        .priceText{
            font-size: 16px;
            color: #3180FF
        }
    }
    .price{
        font-size: 14px;
        i{
            color: #FB0015
        }
        .allPrice{
            margin-left: 60px
        }
    }
  }
</style>















